<template>
  <view>
    <view style="padding: 30rpx;">
      <view>
        <scroll-view v-if="type===0" scroll-x enable-flex="true">
          <view style="display: flex;">
            <block v-for="(item,index) in tempFilePaths" v-bind:key="index">
              <view style="position: relative;">
                <u-image :showLoading="true" :src="item" mode="aspectFill" height="240rpx"
                         width="240rpx" :radius="10" style="margin: 0 10rpx;"></u-image>
                <view
                    style="position: absolute;top: 0;right: 10rpx;background-color: #7d7d7d;padding: 5rpx;border-bottom-left-radius: 50%;border-top-right-radius: 5rpx;">
                  <u-icon name="close" size="12" color="#f3f3f2" @click="deleteImage(index)"></u-icon>
                </view>
              </view>
            </block>
            <view>
              <view @click="insertImage"
                    style="width: 240rpx;height: 240rpx;border-radius: 10px;display: flex;justify-content: center;align-items: center;background-color: #f3f3f2;margin: 0 10rpx;border: 1px solid #c0c0c0">
                <u-icon name="plus" size="28"></u-icon>
              </view>
            </view>
          </view>
        </scroll-view>
        <scroll-view v-else-if="type===1" scroll-x enable-flex="true">
          <view v-show="false">
            <video id="video" :src="tempFilePaths[0]" controls="controls" style="width: 100%;"
                   @fullscreenchange="fullscreenchange"></video>
          </view>
          <view style="display: flex;">
            <view>
              <view
                  style="width: 240rpx;height: 240rpx;border-radius: 10px;display: flex;justify-content: center;align-items: center;background-color: #f3f3f2;margin: 0 10rpx;">
                <u-icon
                    name="https://xiaofanshu.oss-cn-hangzhou.aliyuncs.com/2024/01/common/%E8%A7%86%E9%A2%91.png"
                    size="28"></u-icon>
              </view>
            </view>
            <view>
              <view v-if="coverPicture!=''" style="position: relative;">
                <u--image :src="coverPicture" mode="aspectFill" height="240rpx" width="240rpx"
                          :radius="10" style="margin: 0 10rpx;"></u--image>
                <view @click="deleteCoverPicture"
                      style="position: absolute;top: 0;right: 10rpx;background-color: #7d7d7d;padding: 10rpx;border-bottom-left-radius: 50%;border-top-right-radius: 5rpx;">
                  <u--image
                      src="https://xiaofanshu.oss-cn-hangzhou.aliyuncs.com/2024/01/common/%E5%8F%89%E5%8F%B7.png"
                      mode="aspectFill" height="20rpx" width="20rpx"></u--image>
                </view>
              </view>
              <view v-else>
                <view @click="insertCoverPicture"
                      style="width: 240rpx;height: 240rpx;border-radius: 10px;background-color: #f3f3f2;margin: 0 10rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
                  <u-icon name="plus-circle" size="28"></u-icon>
                  <view style="font-size: 23rpx;color: #2b2b2b;">添加封面</view>
                </view>
              </view>
            </view>
          </view>
          <!-- 预览视频 -->
          <view
              style="background-color: #f3f3f2;margin-top: 20rpx;border-radius: 10px;padding: 10rpx 20rpx;display: inline-flex;margin-left: 10rpx;"
              @click="previewVideo">
            <u-icon name="play-right-fill" color="#2b2b2b"></u-icon>
            <view style="font-size: 23rpx;color: #2b2b2b;">预览视频</view>
          </view>
        </scroll-view>
        <u-popup :show="showAddTopic" :round="10" mode="center" @close="showAddTopic=false"
                 :overlayOpacity="0.3" :safeAreaInsetBottom="true">
          <view style="width: 570rpx;">
            <view style="padding: 20rpx;text-align: center;">
              <view style="font-size: 35rpx;">添加话题</view>
              <view style="font-size: 25rpx;color: #949495;margin-top: 10rpx;">最多不超过12字</view>
            </view>
            <view
                style="margin: 30rpx;margin-top: 15rpx;padding: 20rpx;background-color: #f3f3f2;border-radius: 20rpx;">
              <u-input placeholder="请输入话题" v-model="topicname" focus border="none" clearable
                       maxlength="12" color="#2b2b2b"></u-input>
            </view>
            <u-line></u-line>
            <view style="padding: 30rpx;display: flex;">
              <view
                  style="flex: 1;text-align: center;border-right-style: solid;border-right-color: #e5e4e6;border-right-width: 0.5rpx;">
                <text style="font-size: 35rpx;color: #949495;" @click="cancelAddTopic">取消</text>
              </view>
              <view style="flex: 1;text-align: center;">
                <text style="font-size: 35rpx;color: #FF2442;" @click="addTopic">添加</text>
              </view>
            </view>
          </view>
        </u-popup>
        <u-popup :show="showAttenUser" :round="10" mode="bottom" @close="showAttenUser=false">
          <scroll-view style="height: 500rpx;" @scrolltolower="getAttentionUser">
            <view v-if="attentionUser.list.length>0" style="padding: 30rpx;">
              <block v-for="(item,index) in attentionUser.list" v-bind:key="item.id">
                <view style="display: flex;padding: 10rpx 0;align-items: center;">
                  <image :src="item.avatarUrl" style="height: 90rpx;width: 90rpx;border-radius: 50%;">
                  </image>
                  <view
                      style="display: flex;flex-direction: column;justify-content: space-between;margin-left: 20rpx;flex: 1;">
                    <view style="font-size: 30rpx;color: #2b2b2b;">{{ item.nickname }}</view>
                  </view>
                  <view style="margin-left: auto;">
                    <view
                        style="width: 150rpx;height: 60rpx;line-height: 60rpx;text-align: center;border-radius: 30rpx;background-color: #FF2442;color: #ffffff;font-size: 25rpx;"
                        @click="addUser(item)">@Ta
                    </view>
                  </view>
                </view>
                <u-divider></u-divider>
              </block>
              <view style="margin-top: 70rpx;">
                <u-loadmore :status="attentionUser.status" loadingIcon="spinner" line></u-loadmore>
              </view>
            </view>
            <view v-else style="display: flex;justify-content: center;align-items: center;height: 500rpx;">
              <view style="font-size: 25rpx;color: #afafb0;">暂无数据</view>
            </view>
          </scroll-view>
        </u-popup>
        <u-popup :show="showEmoji" :round="10" mode="bottom" @close="showEmoji=false">
          <scroll-view :style="{height: keyboardHeight+'px'}" scroll-y>
            <view
                style="display: grid;padding: 20rpx;;grid-template-columns: repeat(5,1fr);gap: 20rpx;text-align: center;">
              <block v-for="(item,index) in emojiList" v-bind:key="index">
                <view @click="addEmoji(item.name)">
                  <image :src="item.url" style="width: 100rpx;height: 100rpx;" mode="widthFix"
                         lazy-load>
                  </image>
                </view>
              </block>
            </view>
          </scroll-view>
        </u-popup>
      </view>
      <view style="margin-top: 20rpx;padding: 10rpx;">
        <u-input v-model="title" :fontSize="18" caret-color: #FF2442; placeholder="请输入标题"
                 style="font-size: 30rpx;letter-spacing: 1px;" :maxlength="20" showWordLimit clearable
                 border="none"></u-input>
        <u-divider></u-divider>
      </view>
      <lsj-edit ref="lsjEdit" placeholder="请输入正文" :maxCount="1000" @onReady="editReady"></lsj-edit>
      <view style="display: flex;margin-top: 10rpx;">
        <view style="padding: 15rpx;background-color: #dcdddd;border-radius: 40rpx;display: flex;"
              @click="showAddTopic=true">
          <u-icon
              name="https://xiaofanshu.oss-cn-hangzhou.aliyuncs.com/2024/01/common/%E8%AF%9D%E9%A2%98%20%282%29.png"
              :size="14"></u-icon>
          <view style="font-size: 25rpx;color: #2b2b2b;margin-left: 5rpx;">添加话题</view>
        </view>
        <view
            style="padding: 15rpx;background-color: #dcdddd;border-radius: 40rpx;display: flex;margin-left: 20rpx;"
            @click="openAttenUser">
          <u-icon
              name="https://xiaofanshu.oss-cn-hangzhou.aliyuncs.com/2024/01/common/%E8%89%BE%E7%89%B9.png"
              :size="14"></u-icon>
          <view style="font-size: 25rpx;color: #2b2b2b;margin-left: 5rpx;">用户</view>
        </view>
        <view
            style="padding: 15rpx;background-color: #dcdddd;border-radius: 40rpx;display: flex;margin-left: 20rpx;"
            @click="showEmoji=true">
          <u-icon name="https://xiaofanshu.oss-cn-hangzhou.aliyuncs.com/2024/01/common/expression.png"
                  :size="15"></u-icon>
          <view style="font-size: 25rpx;color: #2b2b2b;margin-left: 5rpx;">表情</view>
        </view>
      </view>

    </view>
    <u-popup :show="showCategory" :round="10" mode="bottom" @close="showCategory=false">
      <view style="height: 750rpx;">
        <view style="padding: 30rpx;height: 50rpx;text-align: center;font-size: 35rpx;line-height: 50rpx;">
          选择分类
        </view>
        <view style="padding: 0 30rpx 15rpx 30rpx;font-size: 24rpx;color: #2b2b2b;">
          tip:建议选择分类，ai分析生成的分类可能不准确
        </view>
        <scroll-view style="height: 600rpx;" scroll-y>
          <view v-for="rowIndex in Math.ceil(categoryList.length / 3)" :key="rowIndex"
                style="display: flex; padding: 40rpx;">
            <view v-for="colIndex in 3" :key="colIndex" style="text-align: center;width: 33%;"
                  v-if="(rowIndex - 1) * 3 + colIndex - 1 < categoryList.length">
              <view @click="chooseCategoryItem(rowIndex,colIndex)"
                    style="padding: 10rpx 20rpx;border-radius: 30rpx;background-color: #afafb0;color: #ffffff;margin: 0 20rpx;"
                    :style="categoryId==categoryList[(rowIndex - 1) * 3 + colIndex - 1].id?'background-color:#FF2442;color:#ffffff':''">
                {{ categoryList[(rowIndex - 1) * 3 + colIndex - 1].categoryName }}
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup>
    <u-cell v-if="categoryName==''" icon="grid" title="选择分类" @click="chooseCategory" :isLink="true"
            arrow-direction="right" :border="false" size="large"></u-cell>
    <u-cell v-else icon="grid" iconStyle="color: #FF2442" titleStyle="color: #FF2442" :title="categoryName"
            @click="chooseCategory" :isLink="true" arrow-direction="right" :border="false" size="large"></u-cell>
    <u-cell v-if="address==''" icon="map" title="添加地点" @click="chooseAddress" :isLink="true" arrow-direction="right"
            :border="false" size="large"></u-cell>
    <u-cell v-else icon="map" iconStyle="color: #2ca9e1" titleStyle="color: #2ca9e1" :title="address"
            @click="chooseAddress" :isLink="true" arrow-direction="right" :border="false" size="large"></u-cell>
    <u-cell v-if="authority===0" icon="lock-open" title="公开可见" :isLink="true" arrow-direction="right"
            :border="false" size="large" @click="chooseAuth"></u-cell>
    <u-cell v-if="authority===1" icon="lock" title="仅自己可见" iconStyle="color: #FF2442" titleStyle="color: #FF2442"
            :isLink="true" arrow-direction="right" :border="false" size="large" @click="chooseAuth"></u-cell>
    <view style="height: 180rpx;"></view>
    <view v-if="showBottom" style="display: flex;position: fixed;bottom: 0;width: 750rpx;height: 160rpx;align-items: center;z-index: 99;background-color: #ffffff;">
      <view style="display: flex;flex-direction: column;align-items: center;margin-left: 30rpx;flex: 1;"
            @click="saveDraftTip">
        <u-icon name="https://xiaofanshu.oss-cn-hangzhou.aliyuncs.com/2024/01/common/%E5%AD%98%E8%8D%89%E7%A8%BF.png"
            size="40"></u-icon>
        <view style="font-size: 25rpx;color: #2b2b2b;">存草稿</view>
      </view>
      <view @click="publishNotes" style="margin-left: 30rpx;margin-right: 30rpx;border-radius: 50px;flex: 5;background-color:#FF2442;height: 100rpx;display: flex;align-items: center;justify-content: center;">
        <view style="color: #ffffff;font-size: 37rpx;letter-spacing: 1px;">发布笔记</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isUpdate: false,
      tableId: '',
      edit: null,
      type: 0,
      tempFilePaths: [],
      coverPicture: '',
      videoB: '',
      title: '',
      content: '',
      topicname: '',
      categoryName: '',
      categoryId: '',
      categoryList: [],
      showCategory: false,
      showAddTopic: false,
      showAttenUser: false,
      attentionUser: {
        list: [],
        page: 1,
        pageSize: 10,
        status: 'loading',
        isLoading: false,
        isNoMore: false
      },
      keyboardHeight: 302,
      showEmoji: false,
      emojiList: [],
      address: '',
      latitude: '',
      longitude: '',
      authority: 0,
      showBottom: true
    };
  },
  methods: {
    insertImage() {
      // 最多插入9个图片
      if (this.tempFilePaths.length >= 9) {
        return
      }
      uni.chooseImage({
        count: 9 - this.tempFilePaths.length,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          // tempFilePath可以作为img标签的src属性显示图片
          let tempFilePaths = res.tempFilePaths
          let filePaths = []
          tempFilePaths.forEach(item => {
            uni.saveFile({
              tempFilePath: item,
              success: (res) => {
                filePaths.push(res.savedFilePath)
                if (filePaths.length == tempFilePaths.length) {
                  this.tempFilePaths = this.tempFilePaths.concat(
                      filePaths)
                }
              }
            });
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">

</style>
